<template>
  <Layout class="root">
    <Header />
    <Layout class="main">
      <Sider :class="['docs-k-layout-sider', { 'docs-k-layout-sider-show': showMiniNav }]">
        <Button size="large" :icon="showMiniNav ? Close : Menu" class="min-menu-nav-btn" theme="outline"
          @click="showMiniNav = !showMiniNav"></Button>
        <Menu v-model="activeName" @click="go" class="left-menu" mode="inline" :open-keys="openkeys">
          <SubMenu :title="item.title" v-for="item in navs" :name="item.title" :key="item.key">

            <MenuItem v-for="sub in item.child" :key="sub.name">
            <WebIcon :name="sub.icon" slot="icon" />
            <router-link :to="`/${item.key}/${sub.name}`">
              <Badge dot v-if="sub.update">
                <span>{{ sub.sub }}</span>
                <span class="sub">{{ sub.title }}</span>
              </Badge>
              <template v-else>
                <span>{{ sub.sub }}</span>
                <span class="sub">{{ sub.title }}</span>
              </template>
            </router-link>
            </MenuItem>
          </SubMenu>
        </Menu>
      </Sider>
      <Content>
        <transition name="fade" mode="out-in">
          <router-view class="content-inner"></router-view>
        </transition>
        <div class="foot-nav">
          <a :href="`/${prev.key}/${prev.name}`" @click="e => link(e, 0)" class="nav-prev" v-if="prev.sub">
            <Icon :type="ChevronBack" />
            <span class="nav-text">{{ prev.sub }} {{ prev.title }}</span>
            <WebIcon :name="prev.icon" slot="icon" />
          </a>
          <a :href="`/${next.key}/${next.name}`" v-if="next.sub" @click="e => link(e, 1)" class="nav-next">
            <WebIcon :name="next.icon" slot="icon" />
            <span class="nav-text">{{ next.sub }} {{ next.title }}</span>
            <Icon :type="ChevronForward" />
          </a>
        </div>
        <Footer />
      </Content>
    </Layout>
  </Layout>
</template>

<script>
import Header from "./Header";
import Footer from "./Footer";
import WebIcon from './WebIcon'
import { menus, navs } from "../menu";
import { ChevronBack, ChevronForward, Menu, Close } from 'kui-icons'
export default {
  components: {
    Header, WebIcon, Footer
  },
  data() {
    return {
      showMiniNav: false,
      navs,
      ChevronBack, ChevronForward, Menu, Close,
      prev: {}, next: {},
      activeName: [],
      openkeys: ['start', 'basic', 'layouts', 'navigation', 'forms', 'datas', 'notices', 'other']
    };
  },
  created() {
    this.setActiveKey(this.$route)
  },
  methods: {
    link(e, t) {
      e.stopPropagation()
      e.preventDefault()
      let c = t ? this.next : this.prev
      let path = `/${c.key}/${c.name}`
      this.$router.push(path);
      this.setActiveKey({ path })
    },
    go({ key, keyPath }) {
      let [m, n] = keyPath
      let path = `/${m}/${n}`
      this.$router.push(path);
      this.setActiveKey({ path })
      this.showMiniNav = false
    },
    getPath(name) {
      let [m, n] = name.split('/').filter(x => x)
      let index = menus.findIndex(x => x.key == m && x.name == n)
      return { current: menus[index], prev: menus[index - 1], next: menus[index + 1] }
    },
    setActiveKey({ path }) {
      let { current, prev = {}, next = {} } = this.getPath(path)
      this.typo = path.indexOf('start') >= 0
      this.prev = prev
      this.next = next
      let { title, sub, name } = current;
      document.title = `${title} ${sub || ""} - KUI`;
      this.activeName = [name];
    }
  },
};
</script>
